<template>
  <div>
    <div class="top">
      <ul>
        <li>💜</li>
        <li>推荐</li>
      </ul>
      <img src="images/7_03.jpg" alt="" />
    </div>
    <div style="height: 0.5rem"></div>
    <Header />

    <Pu />

    <div class="action">
      <ul>
        <li>
          <img src="images/3_07.jpg" alt="" />
          <p>今日专辑</p>
        </li>
        <li>
          <router-link to="/hotstop"
            ><img src="images/3_09.jpg" alt="" />
            <p>热门</p></router-link
          >
        </li>
        <li>
           <router-link to="/yi"
            ><img src="images/3_11.jpg" alt="" />
            <p>好看</p></router-link
          >
          
        </li>
        <li>
          <router-link to="/quan">
            <img src="images/3_13.jpg" alt="" />
            <p>圈子</p>
          </router-link>
        </li>
        <li>
          <router-link to="/active">
            <img src="images/3_15.jpg" alt="" />
            <p>最新活动</p>
          </router-link>
        </li>
      </ul>
    </div>
     <div class="liu">
        <Liu/>
     </div>
      <p>hhhhhjjjjjjj</p>
    <Foot />
  </div>
</template>

<script>
import Foot from "@/components/foot.vue";
import Header from "@/components/header.vue";
import Pu from "@/components/pu.vue";
import Liu from "@/components/liu.vue";
export default {
  components: {
    Header,
    Foot,
    Pu,Liu
  },

  mounted() {
    // 1.在页面加载完毕后自动使用生命周期的钩子函数  dispatch
    // 来触发vuex的调用异步操作
    this.$store.dispatch("demoaxiosa");
  },
  // 12.读取state的数据
  computed: {
    newarr() {
      return this.$store.state.aboutm.arr;
    },
  },
};
</script>

<style scoped>

.top {
  width: 100%;
  display: flex;
  height: 0.5rem;
  background-color: white;
  line-height: 0.5rem;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.top > ul {
  display: flex;
  font-size: 0.18rem;
}
.top > ul > li {
  margin-left: 0.1rem;
}
.top > ul > li:nth-child(2) {
  font-weight: 700;
}
.top > img {
  width: 0.35rem;
  height: 0.35rem;
  position: absolute;
  right: 0.2rem;
  top: 0.1rem;
}

.action > ul {
  display: flex;
  margin: 0.2rem 0;
}
.action > ul > li {
  flex: 1;
  text-align: center;
}
.action > ul > li > img {
  width: 0.5rem;
  height: 0.5rem;
}
.action > ul > li > p {
  color: gray;
}
.action > ul > li > a {
  text-decoration: none;
  color: gray;
}
.action > ul > li > a > img {
  width: 0.5rem;
  height: 0.5rem;
}
.liu{
  background-color: rgb(246, 234, 247);
}
</style>